import o from "@/utils/openlayers";
import blue from "@/assets/blue.png";
import { fromLonLat, toLonLat, transform } from "ol/proj";
import { Style, Icon, Stroke, Fill, Text, Circle } from "ol/style";

import { ref, reactive } from "vue";
export function useOpenlayers() {
  const myMap = ref(null);
  const state = reactive({
    loading: false,
    showMask: false,
    showMessage: false,
    showOverlay: false,
    typeEdit: false,
    addPointType: false,
    layerType: 2, // 当前图层类型
    currentZoom: 14, // 当前缩放级别
    currentFeature: null,
    currentValue: null,
    modifyFeature: null, // 修改后Feature
    modifyData: null, // 修改Feature后数据
    message: "",
    currentArrowFeature: null,
    animateLines: {},
    animateIndex: 1,
  });
  const layer = reactive({
    // points图层
    pointsLayer: {
      layer: null,
      source: null,
      config: {
        minZoom: 1,
        maxZoom: 18,
        zIndex: 5,
      },
      style: null,
    },
    // lines图层
    linesLayer: {
      layer: null,
      source: null,
      config: {
        minZoom: 10,
        maxZoom: 18,
        zIndex: 4,
      },
      style: null,
    },
    // arrowLine图层
    arrowLineLayer: {
      layer: null,
      source: null,
      config: {
        minZoom: 10,
        maxZoom: 18,
        zIndex: 4,
      },
    },
    // polygons图层
    polygonsLayer: {
      layer: null,
      source: null,
      config: {
        minZoom: 1,
        maxZoom: 18,
        zIndex: 4,
      },
    },
    // area图层
    areaLayer: {
      layer: null,
      source: null,
      config: {
        minZoom: 1,
        maxZoom: 18,
        zIndex: 4,
      },
    },
    // 蒙版图层
    maskLayer: {
      layer: null,
      source: null,
      config: {
        minZoom: 1,
        maxZoom: 18,
        zIndex: 9999,
      },
    },
    // 轨迹图层
    trackLayer: {
      layer: null,
      source: null,
      config: {
        minZoom: 1,
        maxZoom: 18,
        zIndex: 4,
      },
    },
    // 海量点位图层
    webGLpointsLayer: {
      layer: null,
      source: null,
      config: {
        minZoom: 1,
        maxZoom: 18,
        zIndex: 5,
      },
      style: null,
    },
    // 热力图图层
    heatmapLayer: {
      layer: null,
      source: null,
      config: {
        minZoom: 1,
        maxZoom: 18,
        zIndex: 5,
      },
    },
  });

  const config = reactive({
    center: fromLonLat([111.7277312, 40.8143503], "EPSG:4326", "EPSG:3857"),
    zoom: 1,
    minZoom: 2,
    maxZoom: 20,
    projection: "EPSG:4326",
    constrainResolution: true, // 设置缩放级别为整数
    smoothResolutionConstraint: false, // 关闭无级缩放地图
  });
  const initMap = (container) => {
    state.loading = true;
    myMap.value = o.createMap(container, config);
    state.loading = false;
  };

  // 初始化Point图层
  const initPointsLayer = (pointsLayer = layer.pointsLayer) => {
    cleartPointsLayer(pointsLayer)
    pointsLayer.source = o.createVectorSource("point");
    pointsLayer.layer = o.createVectorLayer(pointsLayer.config);
    pointsLayer.layer.setSource(pointsLayer.source);
    myMap.value.addLayer(pointsLayer.layer);
  };

  // 初始化Line图层
  const initLinesLayer = (linesLayer = layer.linesLayer) => {
    clearLinesLayer();
    linesLayer.source = o.createVectorSource("line");
    linesLayer.layer = o.createVectorLayer(linesLayer.config);
    linesLayer.layer.setSource(linesLayer.source);
    myMap.value.addLayer(linesLayer.layer);
 
  };

  // 添加Point
  const addPoint = (
    item,
    pointsLayer = layer.pointsLayer,
    scale = 0.15 * 4, // 比例
    anchor = [0.5, 0.5], // 位置
    imageUrl = blue // 图片路径
  ) => {
    const feature = o.createPoint(item, item);
    setPointStyle(feature, scale, anchor, imageUrl);
    state.currentFeature = feature;
    pointsLayer.source.addFeature(feature);
  };
  // 设置Point样式
  const setPointStyle = (
    feature,
    scale = 0.6, // 比例
    anchor = [0.5, 0.5], // 位置
    imageUrl = blue // 图片路径
  ) => {
    // 点位设置图片
    const style = o.setStyle({
      image: new Icon({
        src: blue,
        anchor: anchor,
        scale: 0.6,
      }),
    });
    //  点位配置样式
    // const defalutStyle = new Style({
    //     //填充色
    //     fill: new Fill({
    //         color: "red",
    //     }),
    //     //边线颜色
    //     stroke: new Stroke({
    //         color: "red",
    //         width: 5,
    //     }),
    //     //形状
    //     image: new Circle({
    //         radius: 5,
    //         fill: new Fill({
    //             color: "red",
    //         }),
    //     }),
    // })
    // feature.setStyle(style)
    feature.setStyle(style);
  };

  // 添加Line
  const addLine = (
    item,
    linesLayer = layer.linesLayer,
    strokeColor ='#00AFFF', // 边线颜色
    strokeWidth = 5 // 边线宽度
  ) => {
    const feature = o.createLine(item, item);
    setLineStyle(feature, strokeColor, strokeWidth);
    console.log(linesLayer,'linesLayer')
    linesLayer.source.addFeature(feature);

  };

  // 设置Line样式
  const setLineStyle = (
    feature,
    strokeColor = "#00AFFF", // 边线颜色
    strokeWidth = 5 // 边线宽度
  ) => {
    console.log(strokeColor, strokeWidth,'222');

    const style = o.setStyle({
      stroke: o.setStroke(strokeColor, strokeWidth),
    });
    feature.setStyle(style);
  };

  // 跳转点
  const toPoint = (pointPath, duration = 1000, zoom = 12, rotation = 6) => {
    //这里给动画设置一个初始值
    myMap.value.getView().animate({
      //将地理坐标转为投影坐标
      center: fromLonLat(pointPath, "EPSG:4326", "EPSG:3857"),
      duration,
      zoom,
      rotation,
    });
  };

  // 删除Point
  const delPoint = (feature, pointsLayer = layer.pointsLayer) => {
    pointsLayer.layer.getSource().removeFeature(feature);
  };

  // 清除Point图层
  const cleartPointsLayer = (linesLayer = layer.linesLayer) => {
    if (linesLayer.layer) {
      linesLayer.layer.getSource().clear();
    }
  };

  // 清除Line图层
  const clearLinesLayer = (linesLayer = layer.linesLayer) => {
    if (linesLayer.layer) {
      linesLayer.layer.getSource().clear();
    }
  };
  return {
    state,
    initMap,
    addPoint,
    initPointsLayer,
    setPointStyle,
    toPoint,
    delPoint,
    cleartPointsLayer,
    addLine,
    setLineStyle,
    clearLinesLayer,
    initLinesLayer,
  };
}
